<style lang="scss" rel="stylesheet/scss" scoped>
  ul{
    background: white;
    li{
      width: 100%;
      line-height: 2rem;
      font-size: .75rem;
      box-sizing: border-box;
      padding: 0 1rem;
    }
    .active{
      color: #0994db;
    }
  }
</style>
<template>
  <div>
    <ul v-if="list && list.length > 0">
      <li v-for="item in list" @click="clickItem(item)" :class="activeId && activeId == item[idName]?'active':''">
        {{item[txtName]}}
        <i class="iconfont icon-duihao fr" v-if="activeId && activeId == item[idName]"></i>
      </li>
    </ul>
    <div style="padding: 8px;font-size: .8rem;color: grey;" v-else>暂无可选数据</div>
  </div>
</template>
<script>
  export default {
    props: {
      list: null,
      txtName: {
        default: 'txt'
      },
      idName: {
        default: 'id'
      },
      activeId: null
    },
    data(){
      return {};
    },
    methods: {
      clickItem(item){
        //this.activeId = item[this.idName];
        this.$emit('clickItem', item);
      }
    }
  }
</script>
